<template>
	<view class="home-list">
		<view class="home-list-item" hover-class="home-list-hover" @click="toSafe">
			<view class="home-list-item-left">
				<view class="home-list-item-text">账号安全</view>
			</view>
		</view>
		<view class="home-list-item" hover-class="home-list-hover" @click="exitLogin">
			<view class="home-list-item-left">
				<view class="home-list-item-text">退出登录</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	const toSafe = () => {
		uni.navigateTo({
			url: '/pages/safe/safe'
		})
	}
	const exitLogin = () => {
		uni.showModal({
			title: "确认退出登录？",
			success: (res) => {
				if (res.confirm) {
					uni.removeStorageSync("userInfo")
					uni.removeStorageSync("token")
					uni.removeStorageSync("user")
					uni.navigateTo({
						url: "/pages/login/login"
					})
				}
			}
		})
	}
</script>

<style lang="scss" scoped>
	.home-list {
		display: flex;
		flex-direction: column;

		.home-list-item {
			display: flex;
			justify-content: space-between;
			padding: 30rpx;
			border-bottom: 1px solid #bfbfbf;

			.home-list-item-left {
				display: flex;
				align-items: center;

				.home-list-item-text {
					margin-left: 20rpx;
					font-size: 30rpx;
					font-weight: 600;
				}

				.home-list-item-icon {
					font-size: 40rpx;
				}
			}

			.home-list-item-right {
				display: flex;
				align-items: center;
				color: #B8B8B8;
			}
		}

		.home-list-hover {
			background-color: #eee;
		}
	}
</style>